<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.rating{
	width:40px;
	height:16px;
    background: url(star-matrix.gif);
}
.nostar{
	background-position: 0  0;
}
.onestar{
	background-position: 0 -16px;
}
.twostar{
	background-position: 0 -32px;
}
.threestar{
	background-position: 0 -48px;
}

.fourstar{
	background-position: 0 -64px;
}
.fivestar{
	background-position: 0 -80px;
}
.rating li{
   float:left;
   text-indent: -455em;
}
.rating li a{
	display: block;
	width:16px;
	height:16px;
}
.rating li.one a{left:0;}
.rating li.two a{left:16px;}
.rating li.three a{left:32px;}
.rating li.four a{left:48px;}
.rating li.five a{left:64px;}

	</style>
	<script type="text/javascript">
    var x=parseInt(prompt("请输入一个0-5的数值"));
    if(x==0){
    	document.write("<ul class='rating nostar'></ul>");
    }
     if(x==1){
    	document.write("<ul class='rating onestar'><li class='one'><a href='#'' title='1分'>1</a></li></ul>");
    }
     if(x==2){
    	document.write("<ul class='rating twostar'><li class='two'><a href='#'' title='1分'>1</a></li></ul>");
    }
     if(x==3){
    	document.write("<ul class='rating threestar'><li class='three'><a href='#'' title='1分'>1</a></li></ul>");
    }
     if(x==4){
    	document.write("<ul class='rating fourstar'><li class='four'><a href='#'' title='1分'>1</a></li></ul>");
    }
    if(x==5){
    	document.write("<ul class='rating fivestar'><li class='five'><a href='#'' title='1分'>1</a></li></ul>");
    }
	</script>
</head>
<body>
	
	<!-- <ul class="rating nostar">
					<li class="one"><a href="#" title="1分">1</a></li>
					<li class="two"><a href="#" title="2分">2</a></li>
					<li class="three"><a href="#" title="3分">3</a></li>
					<li class="four"><a href="#" title="4分">4</a></li>
					<li class="five"><a href="#" title="5分">5</a></li>
				</ul> -->
</body>
</html>